<template>
  <view class="setphone">
		<navNav :navobj="navobj"></navNav>
		<view class="formation" >
			<view class="labelBox" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
				<view class="input">
					<input style="text-align: center;" v-model="nickName" placeholder="昵称"></input>
				</view>
			</view>

			<view  @click="editUser()" style="margin: 0 auto;margin-top: 70rpx; width: 600rpx;height: 80rpx;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 26rpx;color: #fff;background-color: #3381FF;">
				确定
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'修改昵称',
				image:true
	})
	onLoad(()=>{
		nickName.value = userStores.user.nickName
	})
	const	nickName=ref('')
	//修改头像昵称
	const editUser=async()=> {
		var data = {nickName:nickName.value}
		const result = await proxy.$api.editUser(data)
		if(result.code==200){
			userStores.getUser()
			uni.showToast({
				title: '修改成功',
				icon: 'none',
				duration:1000
			})
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
		}
		
	}

</script>

<style lang="scss">
 .setphone{
	 background-color: #eee;
	 width: 750rpx;height: 100vh;
	 .formation {
	 	width: 710rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		border-radius: 20rpx;
		padding:40rpx  30rpx 80rpx 30rpx; 
		box-sizing: border-box;
		background-color: #fff;
	 
	 	.labelBox {
	 		margin: 10px 0px;
	 
	 	}
	 
	 	.verifyBox {
	 		.input {
	 			display: flex;
	 			align-items: center;
	 
	 			.verify {
	 				background-color: $blue;
	 				color: white;
	 				margin-left: 10px;
	 				height: 70rpx;
	 				padding: 0px 10px;
	 				border-radius: 5px;
	 				text-align: center;
	 				display: flex;
	 				align-items: center;
	 			}
	 		}
	 	}
	 }
 }

.is-input-border {
	border: none !important;
	border-radius: 10rpx !important;
}
	
</style>
